<template>
    <view class="content">
        <view class="waybillNumber" v-if="showBottomList">
            <van-checkbox-group ref="checkboxGroup" :value="checked" :checked="checked" @change="handleCheck">
                <view class="result_item_bg" v-for="(item, index) in packageList" :key="index">
                    <view class="result_item">
                        <view class="result_item_content">
                            <van-checkbox v-model="item.isChecked" shape="round" v-if="showMark"
                                @click.stop="onChange('单选', item)" :label-disabled="false"
                                :disabled="type=='search' &&item.status!=='2' ? true : false"
                                 use-icon-slot>
                                <image  :src="(type=='search' && item.status !== 2 ) ? disabledIcon : (item.isChecked ? activeIcon : inactiveIcon)"
                                    @click.stop="onChange('单选', item)" slot="icon" class="checked-img"
                                    style="height: 16px;width: 16px;" />
                            </van-checkbox>
                            <view class="result_item_content_wrapper" @tap="packageProcesses(item)">
                                <view class="result_item_top" v-if="!['returnAwaitIn', 'returnAwaitOut', 'returnHasOut'].includes(type)">
                                    <view class="result_item_top_left">
                                        <view class="result_item_top_left_status" v-if="type=='search'">{{ item.statusText }}</view>
                                        <view class="result_item_top_left_number" >{{ item.wayBillNo }}</view>
                                    </view>
                                    <view class="result_item_top_right" :class="{'gray':item.status=='3' || type =='hasOut'}" v-if="item.status!=='1' && type !=='await'">{{ item.pickupCode }}</view>
                                </view>
                                <view class="result_item_middle" :class="{'pt36':!['returnAwaitIn', 'returnAwaitOut', 'returnHasOut'].includes(type)}">
                                    <view class="address"><van-icon name="location-o" style="margin-right: 16rpx;" />
                                        <span>{{ item.address }}</span>
                                    </view>
                                    <view class="userInfo">
                                        <view class="userInfo_left">
                                            <view class="userInfo_name"> <van-icon name="user-o" style="margin-right: 16rpx;" /> <span>{{ item.userName }}</span> </view>
                                            <view class="userInfo_phone" v-if="item.isShow">{{ item.mobile }}</view>
                                            <view class="userInfo_phone" v-if="!item.isShow">{{ item.mobileHidden }}</view>
                                            <view class="userInfo_eye">
                                                <van-icon name="eye-o" @tap.stop="changeEye(item)"  v-if="item.isShow" style="margin-left: 24rpx;"/>
                                                <van-icon name="closed-eye" @tap.stop="changeEye(item)" v-if="!item.isShow" style="margin-left: 24rpx;"/>
                                            </view>                                        </view>
                                        <view class="userInfo_right" v-if="type=='search'"> <van-icon name="phone" color="#ff6203" /></view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="result_item_bottom">
                            <view class="result_item_bottom_left time"> {{ item.operationTime }}</view>
                            <!-- <view class="result_item_bottom_right btnAreaRight" v-if="type=='search'">
                                <view class="moreAct" @tap="showMoreAction">更多操作</view>
                                <button type="default" plain class="submitBtn r16"
                                    @click="toLogisticsDetail(item)">查看物流</button>
                                <button type="default" plain class="submitBtn"
                                    @click="toFollowUpJudge(item)">去追评</button>
                                <button type="default" plain class="whiteBtn"
                                    @click="toFollowUpJudge(item)">拍照出库</button>
                            </view> -->
                            <view class="result_item_bottom_right btnAreaRight" v-if="type=='hasIn' || type == 'PENDING' || type=='currentStock' ||(type=='search' && item.status == '2')">
                                <view class="moreAct" @tap="showMoreAction(item)" v-if="isWithinTenMinutes(item.operationTime) " >更多操作</view>
                                <button type="default" plain class="submitBtn r16" style="padding-left: 40rpx; padding-right: 40rpx;"
                                    @click="toHandleStock(item,item.status)">出库</button>
                                <button type="default" plain class="whiteBtn"
                                    @click="toPhotoOut(item)">拍照出库</button>
                            </view>
                            <view class="result_item_bottom_right btnAreaRight" v-if="type=='await' || type=='abnormal' || (type == 'search' && item.status=='1')">
                                <button type="default" plain class="submitBtn r16" style="padding-left: 40rpx; padding-right: 40rpx;"
                                    @click="toHandleStock(item,item.status)">入库</button>
                                <button type="default" plain class="whiteBtn"
                                    @click="toPhotoIn(item)">拍照入库</button>
                            </view>
                            <view class="result_item_bottom_right btnAreaRight" v-if="(type=='hasOut' || (type == 'search' && item.status=='3') ) && isWithinTenMinutes(item.operationTime) ">
                                <!-- 十分钟内显示  -->
                                 <view></view>
                                <button type="default" plain class="whiteBtn"  @click="cancelStockOut(item)">取消出库</button>
                            </view>
                            <view class="result_item_bottom_right btnAreaRight" v-if="type=='returnAwaitIn'">
                                <!-- <view class="moreAct" @tap="showMoreAction" v-if="type=='search'">更多操作</view> -->
                                <button type="default" plain class="whiteBtn" @click="toHandleReturnIn(item)">退货入库</button>
                            </view>
                            <view class="result_item_bottom_right btnAreaRight" v-if="type=='returnAwaitOut'">
                                <button type="default" plain class="submitBtn r16" @click="cancelReturnInOrOut(item)" v-if="isWithinTenMinutes(item.operationTime) " >取消退件入库</button>
                                <button type="default" plain class="whiteBtn"  @click="toReturnOut(item)">退货出库</button>
                            </view>
                            <!-- <view class="result_item_bottom_right btnAreaRight" v-if="type == 'search' && item.status=='6'">
                                <view class="moreAct" @tap="showMoreAction">更多操作</view>
                                <button type="default" plain class="whiteBtn r16" @click="toReturnOut(item)">退货出库</button>
                                <button type="default" plain class="whiteBtn" @click="toPhotoIn(item)">退件拍照</button>
                            </view>
                            <view class="result_item_bottom_right btnAreaRight" v-if="type == 'search' && item.status=='5'">
                                <button type="default" plain class="submitBtn r16"  @click="toHandleReturnIn(item)">退货入库</button>
                                <button type="default" plain class="whiteBtn" @click="toPhotoIn(item)">退件拍照</button>
                            </view> -->
                        </view>
                    </view>
                </view>
                <view v-if="loading" class="loading-text">正在加载...</view>
                <view v-if="finished" class="no-more-text">没有更多了</view>

            </van-checkbox-group>
        </view>
        <!-- <template >
            <view class="nav_box">
                <van-submit-bar price="" button-text="一键出库" button-type="warning" @submit="allTakeOut">
                    <view style="display: flex; align-items: center;" class="delete">
                        <van-checkbox checked-color="#FF6203" v-model="checkAll" :label-disabled="false"
                            @click="onChangeItem('多选')" @change="handleCheckAll" use-icon-slot>
                            <image @change="handleCheckAll" slot="icon" class="checked-img"
                                :src="checkAll ? activeIcon : inactiveIcon" />
                        </van-checkbox>
                        <view class="selectedNum" @click="onChangeItem('多选')">已选（{{ selectedRowKeys.length }}）</view>
                    </view>
                </van-submit-bar>
            </view>
        </template> -->
    </view>
</template>

<script>

export default {
    components: {
    },
    props: {
        resultList: {
            type: Array,
            default: () => []
        },
        checkAll: {
            type: Boolean,
            default: false
        },
        checked: {
            type: Array,
            default: () => []
        },
        pageType: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: ''
        },
        activiteTab:{
            type:Number,
            default:0
        },
        showBottomList:{
            type:Boolean,
            default:true
        },
        finished: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            packageList: [],
            showMark: true, //显示多选框
            select:false,
            // checked: [],
            // checkAll: false, // 标记是否全选
            // selectedRowKeys: [], // 已选择的数据的id
            // selectedRows: [], // 已选择的数据
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            isShowBlue: false,
            targetList:[]

        }
    },
    watch:{
        
        resultList: {
            immediate: true,
            handler(val) {
                console.log(val)
               this.packageList = JSON.parse(JSON.stringify(this.resultList))
            },
            deep: true
        },
        type: {
            immediate: true,
            handler(val) {
                console.log(val)
                if(val == 'hasOut'){
                  this.showMark = false
                }
            },
            // deep: true
        },
        activiteTab: {
            immediate: true,
            handler(val) {
                console.log(val)
                if(val == 0 || val == 3){
                  this.showMark = true
                }else{
                  this.showMark = false
                }
            },
            // deep: true
        },
        // checked: {
        //     handler (val) {
        //         console.log(val, 'newName')
        //     }
        // },
        // selectedRowKeys: {
        //     handler (val) {
        //         console.log(val, 'selectedRowKeys')
        //         if (val.length > 0) {
        //             this.isShowBlue = true // 标记为正常的按钮  深蓝色
        //         } else {
        //             this.isShowBlue = false // 标记为正常的按钮  浅蓝色
        //         }
        //     }
        // },
        // selectedRows: {
        //     handler (val) {
        //         console.log(val, 'selectedRows')
        //     }
        // },
        // checkAll: {
        //     immediate: true,
        //     handler(newVal) {
        //         console.log('全选状态变化:', newVal)
        //         if (newVal == true) {
        //             debugger
        //             this.packageList = this.targetList.forEach(item => { item.isChecked = newVal })
        //             console.log(this.packageList, 'packageList')
        //         } else {
        //             this.packageList = this.targetList
        //             console.log(this.packageList, 'packageList')
        //         }
        //         // 同步到父组件
        //         // this.$emit('update:checkAll', newVal)
        //     }
        // }
    },
    onLoad(data) {
        if(data!==null){

        }
    },
    onReady () {
        console.log(this.type,'type')
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },

         /**
         * 判断操作时间是否在十分钟内
         * @param {string} operationTime - 操作时间，格式需能被 Date 解析
         * @returns {boolean} - 在十分钟内返回 true，否则返回 false
         */
         isWithinTenMinutes(operationTime) {
            if (!operationTime) return false;
            const formattedTime = operationTime.replace(/-/g, '/');
            const tenMinutesInMilliseconds = 10 * 60 * 1000;
            const operationTimestamp = new Date(formattedTime).getTime();
            const currentTimestamp = new Date().getTime();
            return currentTimestamp - operationTimestamp <= tenMinutesInMilliseconds;
        },
        //更多操作  动作面板
        showMoreAction(item) {
            this.$emit('showMoreAction',item)
        },
        changeEye(item){
            console.log(item,'item')
            item.isShow=!item.isShow
        },

        // 选择框  单选
        onChange(type, item) {
            if(this.showMark == false){
                return false
            }
            // if(item.status!=='1' && this.type =='search'){
            //     return false
            // }
            console.log(type, item)
            item.isChecked = !item.isChecked
            this.$emit('checkbox-change', { item, checked: item.isChecked })
        },

        //选择框  文字
        handleCheck (item, e) {
            if(this.showMark == false){
                return false
            }
            // if(item.status!=='1' && this.type =='search'){
            //     return false
            // }
            console.log(item, e, '单选----')   
            item.isChecked = e.detail
            this.$emit('handlechecked', {
                item,
                checked: item.isChecked
            })
        },
        // onChangeItem (i, item) {
        //     // console.log(i, 'i', item)
        //     item.isChecked = !item.isChecked
        //     if (item.isChecked === true) {
        //         this.selectedRowKeys.push(item.waybillNumber)
        //         this.selectedRows.push(item)
        //     } else {
        //         const index = this.selectedRowKeys.indexOf(item.waybillNumber)
        //         console.log(index, 'indesR')
        //         this.selectedRowKeys.splice(index, 1)
        //         this.selectedRows.splice(index, 1)
        //     }
        // },
        // 标记  选择框
        // handleCheck (item, e) {
        //     console.log(item, e, '单选----')

        //     this.checkAll = this.checked.length === this.packageList.length
        //     item.isChecked = e.detail

        //     if (item.isChecked === true) {
        //         this.selectedRowKeys.push(item.waybillNumber)
        //         this.selectedRows.push(item)
        //     } else {
        //         const index = this.selectedRowKeys.indexOf(item.waybillNumber)
        //         console.log(index, 'indesR')
        //         this.selectedRowKeys.splice(index, 1)
        //         this.selectedRows.slice(index, 1)
        //     }
        // },
        // // 全选框
        // handleCheckAll(val) {
        //     console.log(val, '全选-----', this.packageList, '11111')
        //     this.handleSelectAll(val.detail, !this.select)

        // },
        // // 提取公共的全选处理逻辑
        // handleSelectAll(checked, isManageMode) {
        //     // const targetList = isManageMode ? this.packageList : this.newCartList;
        //     const targetList = this.packageList;
        //     const allCheckedIds = targetList.map(item => item.waybillNumber)
        //     // const allIds = this.newCartList.map(item => item.id)  //排除不可点击元素  只对可点击元素进行操作

        //     targetList.forEach(item => { item.isChecked = checked })

        //     if (checked) {
        //         this.checked = allCheckedIds;
        //         this.selectedRows = JSON.parse(JSON.stringify(targetList));
        //     } else {
        //         this.checked = [];
        //         this.checkAll = false;
        //         this.selectedRows = [];
        //     }
        //     this.selectedRowKeys = this.checked;
        // },

        // // 一键出库
        // allTakeOut(){
        //     if(this.selectedRowKeys.length==0){
        //         return false
        //     }
        //     console.log(this.selectedRowKeys,'selectedRowKeys')
        //     console.log(this.selectedRows,'selectedRows')
        // },

        // 查看快件详情  查看物流
        packageProcesses(item){
            console.log(item,'查看快件详情')
            uni.navigateTo({
                url: `/pages/merchant/packageProcess?orderId=${item.orderId}&status=${item.status}&type=${this.type}&pageType=${this.pageType}&activiteTab=${this.activiteTab}`
            })
        },
        // 出库
        toHandleStock(item,status,){
            console.log(item,'出入库')
            this.$emit('submitSinglePackage',item,status,'single')
        },
        // 待退货入库
        toHandleReturnIn(item,status){
            console.log(item,'待退货入库')
            this.$emit('submitSinglePackage',item,status,'single')
        },
        // 退货出库
        toReturnOut(item,status){
            console.log(item,'退货出库')
            this.$emit('submitSinglePackage',item,status,'single')
        },
        // 拍照出库
        toPhotoOut(item){
            console.log(item,'拍照出库')
            this.$emit('toPhotoOut',item)
        },
        // 取消出库
        cancelStockOut(item){
            console.log(item,'取消出库')
            this.$emit('cancelStockOut',item)
        },
        // 取消退货入库
        cancelReturnInOrOut(item){
            console.log(item,'取消退货入库')
            this.$emit('cancelStockOut',item)
        },

    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    // height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}

// 运单号 取件码 搜索
.waybillNumber{
    .result_item_bg{
        background: #efefef;
        padding-bottom:4rpx;
    }
    .result_item{
        background-color: #ffffff;
        padding: 40rpx 48rpx 0rpx 48rpx;


        .result_item_content{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #e6e6e6;
        }

        .result_item_content_wrapper{
            width: 100%;
        }
        .result_item_top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .result_item_top_left{
                display: flex;
                align-items: center;

                .result_item_top_left_status{
                    padding: 0rpx 18rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    border-radius: 8rpx;
                    background: #ff6203;
                    font-weight: 400;
                    font-size: 20rpx;
                    text-align: left;
                    color: #fff;
                }
                .result_item_top_left_number{
                    font-weight: bolder;
                    font-size: 28rpx;
                    line-height: 28rpx;
                    text-align: left;
                    color: #333;
                    // margin-left: 16rpx;
                }
            }
            .result_item_top_right{
                font-weight: 700;
                font-size: 36rpx;
                line-height: 36rpx;
                text-align: left;
                color: #ff6203;
            }
            .gray{
                color: #999999;
            }
        }
        .result_item_middle{


            padding-bottom: 38rpx;
            // border-bottom: 1px solid #e6e6e6;

           .address{
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 28rpx;
                text-align: left;
                color: #666;

            }
            .userInfo{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 24rpx;
                .userInfo_left{
                    display: flex;
                    align-items: center;
                   .userInfo_name{
                        font-weight: 400;
                        font-size: 28rpx;
                        text-align: left;
                        color: #666;
                        display: flex;
                        align-items: center;
                    }
                    .userInfo_phone{
                        font-weight: 400;
                        font-size: 28rpx;
                        text-align: left;
                        color: #666;
                        margin-left: 24rpx;
                    }
                }
            }
        }
        .result_item_bottom{
            padding: 24rpx 0rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time{
                font-weight: 400;
                font-size: 24rpx;
                text-align: left;
                color: #999;
            }
            .moreAct{
                font-size: 24rpx;
                text-align: left;
                color: #ff6203;
                margin-right: 16rpx;
            }
            .btnAreaRight {
                display: flex;
                align-items: center;
                justify-content: space-between;
        
                // 灰字灰框按钮
                .grayBtn {
                    background-color: #Ffffff;
                    border-radius: 28rpx;
                    font-size: 24rpx;
                    text-align: center;
                    color: #D4D4D4;
                    height: 56rpx;
                    line-height: 52rpx;
                    border: 2rpx solid #D4D4D4;
                    padding-left: 20rpx;
                    padding-right: 20rpx;
                    margin-right: 24rpx;
                }
        
                // 黑字灰框按钮
                .blackBtn {
                    background-color: #Ffffff;
                    border-radius:28rpx;
                    font-size: 24rpx;
                    text-align: center;
                    color: #111111;
                    height: 56rpx;
                    line-height: 52rpx;
                    border: 2rpx solid #D4D4D4;
                    padding-left: 20rpx;
                    padding-right: 20rpx;
                }
        
                // 黑字黑框按钮
                .blackBlackBtn {
                    background-color: #Ffffff;
                    border-radius: 28rpx;
                    font-size: 24rpx;
                    text-align: center;
                    color: #111111;
                    height: 56rpx;
                    line-height: 52rpx;
                    border: 2rpx solid #111111;
                    padding-left:20rpx;
                    padding-right: 20rpx;
                    width: 156rpx;
                }
        
                // 红字红框
                .submitBtn {
                    background-color: transparent;
                    border-radius: 38px;
                    font-size: 24rpx;
                    text-align: center;
                    color: #FF6203;
                    height: 56rpx;
                    line-height: 52rpx;
                    border: 2rpx solid #FF6203;
                    padding-left:20rpx;
                    padding-right: 20rpx;
                    min-width: 56rpx;
                }
        
                // 红底白字
                .whiteBtn {
                    background-color: #ff6203;
                    border-radius: 38px;
                    font-size: 24rpx;
                    text-align: center;
                    color: #fff;
                    height: 56rpx;
                    line-height: 52rpx;
                    border: 2rpx solid #FF6203;
                    padding-left: 20rpx;
                    padding-right: 20rpx;
                }
                // button {
                //     border: 1px solid #111111;
                // }
            }
        }
    }
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
::v-deep .userInfo_name,.address .van-icon{
    font-size: 32rpx;
    // color: #ff6203;
}
::v-deep .userInfo_eye .van-icon{
    font-size: 32rpx;
}
::v-deep .userInfo_right .van-icon{
    font-size: 40rpx;
    color: #ff6203;
}

.checked-img {
    height:40rpx;
    width:40rpx;
}
::v-deep .address .van-icon{
    font-size: 32rpx;
    // color: #ff6203;
}
::v-deep .bar-class, .van-submit-bar__bar{
  display: flex;
  justify-content: space-between !important;
  border-top: 1px solid #f9f9f9 !important;
  // padding-top: 20px !important;
}
::v-deep .van-submit-bar__tip {
    color: #FF6203 !important;
    background-color:#FFF9F7 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    line-height: 35px !important;

}
::v-deep .van-button--warning {
    background-color: #FF6203;
  }
  .r16{
    margin-right: 16rpx;
  }

  .pt36{
    padding-top: 36rpx;
  }
</style>
